<template>
  <div class="wh100" ref="vehicleDrivingRef"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.initVehicleDrivingLine()
  },
  methods: {
    initVehicleDrivingLine() {
      let myChart = this.$echarts.init(this.$refs.vehicleDrivingRef)
      let option = {
        grid: {
          left: '15%',
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: '#315070', //更改坐标轴颜色
            },
          },
          data: [
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13,
            14,
            15,
            16,
            17,
            18,
            19,
            20,
            21,
            22,
            23,
            24,
          ],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: '#315070', //更改坐标轴颜色
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        tooltip: {},
        series: [
          {
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: '#FFFF46', //折线点的颜色
                lineStyle: {
                  color: '#FFFF46', //折线的颜色
                },
              },
            },
            data: [
              120,
              140,
              100,
              120,
              300,
              230,
              130,
              170,
              140,
              120,
              300,
              230,
              120,
              140,
              100,
              120,
              300,
              230,
              130,
              170,
              140,
              120,
              300,
              230,
            ],
            type: 'line',
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
.wh100 {
  width: 100%;
  height: 100%;
}
</style>
